<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
   		});
    </script>
	<link rel="stylesheet" href="assets/css/main.css" />

</head>
<body class="index">
<div id="page-wrapper">
	<!-- Header -->
		<header id="header" class="alt">
			<h1 id="logo"><a href="index.html">Twenty <span>by HTML5 UP</span></a></h1>
			<nav id="nav">
				<ul>
					<li class="current"><a href="index.html">返回首页</a></li>
					<li class="current"><a href="login/NewLogin.html">退出登录</a></li>
					<li class="submenu">
						<a href="#" onclick="show(1)">基础数据管理</a>
						<ul>
							<li><a href="mainshow.html?id=1">市场信息查看</a></li>
							<li><a href="mainshow.html?id=2">脚标机信息查看</a></li>
							<li><a href="mainshow.html?id=3">ID卡数据查看</a></li>
							<li><a href="mainshow.html?id=4">销售终端信息查看</a></li>
							<li><a href="mainshow.html?id=5">禽类信息信息查看</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">脚标机发放回收管理</a>
						<ul>
							<li><a href="mainshow.html?id=6">脚标机发放信息查看</a></li>
							<li><a href="mainshow.html?id=7">脚标机回收信息查看</a></li>
							<!--<li><a href="mainshow.html?id=8">脚标机用户更新管理</a></li>-->
						</ul>
					</li>
					<li class="submenu">
						<a href="#">脚标机监控</a>
						<ul>
							<li><a href="mainshow.html?id=9">脚标机监控信息查看</a></li>
							<li><a href="mainshow.html?id=10">报警记录信息查看</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">脚标机报废维修管理</a>
						<ul>
							<li><a href="mainshow.html?id=11">脚标机报废信息查看</a></li>
							<li><a href="mainshow.html?id=12">脚标机维修信息查看</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">ID卡发放回收管理</a>
						<ul>
							<li><a href="mainshow.html?id=15">ID卡发放记录信息查看</a></li>
							<li><a href="mainshow.html?id=16">ID卡回收记录信息查看</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">条形码发放回收管理</a>
						<ul>
							<li><a href="mainshow.html?id=15">条形码发放信息查看</a></li>
							<li><a href="mainshow.html?id=16">条形码回收信息查看</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">贴标信息管理</a>
						<ul>
							<li><a href="mainshow.html?id=17">贴标信息查看</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</header>
	<!-- Banner -->
		<section id="banner">
			<div class="inner">
				<header>
					<h2>光禽脚标机后台</h2>
				</header>
				<p><strong id="times"></strong></p> 
				<br />
				<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></p>
				<br />
				<p><strong id="city"></strong></p>
				<br />
				<p><strong id="wind"></strong></p>
				<br />
			</div>
		</section>
	<!-- Main -->
	    <br /><br />
		<center><div class="6u 12u(mobile)">
		<select id="slaughter" style="width: 19.375rem;height:3rem;border: solid 1px rgba(124, 128, 129, 0.2);padding-left: 0.6125rem" onchange="slaughter()">
		</select>
		</div></center>
		<br />
		<article id="main1">
			<header class="special container">
				<br />
				<span class="icon fa-bar-chart-o"></span>
				<h2><strong>设备状态图</strong></h2>
				<center><div id="mainPage2" style="width: 300px;height:270px;"></div></center>
			</header>
		</article>
		<article id="main2">
			<header class="special container">
				<span class="icon featured fa-check"></span>
				<br />
				<h2 id="title1"></h2>
				<div class="row 50%"  style="margin-top: 1.25rem;margin-left: 0.3125rem;font-size:0.625rem;overflow-y: auto;max-height: 25rem;">
					<table id="tablezz" >
					
					</table>
				</div>     
			</header>
		</article>
		<article id="main3">
			<header class="special container">
				<span class="icon fa-bar-chart-o"></span>
				<h2><strong>禽类销售状态图</strong></h2> 
				<br />
				 <center><div id="mainPage3" style="width: 300px;height:270px;"></div></center>
			</header>
		</article>
		<article id="main4">
			<header class="special container">
				<span class="icon featured fa-check"></span>
				<br />
				<h2 id="title2"></h2>
				<div class="row 50%"  style="margin-top: 1.25rem;margin-left: 0.3125rem;font-size:0.625rem;overflow-y: auto;max-height: 25rem;">
					<table id="tablezz1" >

					</table>
				</div>     
			</header>
		</article>
	<!-- Footer -->
		<footer id="footer">
			<ul class="copyright">
				<li>Copyright&copy;2020.</li>
				<li>By Hanqy kabit@sina.cn.</li>
			</ul>
		</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollgress.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
	
	function getDate(){
	     var date = new Date();
	     var date1 = date.toLocaleString();
	     var div1 = document.getElementById("times");
	     div1.innerHTML = date1;
	}          
	setInterval("getDate()",1000);
	
	$.ajax({
	     url: "https://restapi.amap.com/v3/weather/weatherInfo?city=广州市&key=cac33d5009fe938e80757b5135d20fff",
	     type: "get",
	     success: function (data) {
	          //console.log(data.lives[0])
			  $("#city").append(data.lives[0].city+" "+data.lives[0].weather+" "+data.lives[0].temperature+"°C")
			  $("#wind").append(data.lives[0].winddirection+"风 风力"+data.lives[0].windpower+"级")
			  
	     }
	});	 
	
	//URL 在assets/js/util.js里面
	$.ajax({
	     url: URL+"/slaughterHouse",
	     type: "get",
	     success: function (data) {
	          //console.log(data.object)
			  for(var i=0;i<data.object.length;i++){
				  $("#slaughter").append("<option value="+data.object[i].id+">"+data.object[i].name+"</option>")
			  }
			  slaughter();
	     }
	});	 

	function slaughter(){

        $("#title1").empty();
		$("#title2").empty();
		sessionStorage.setItem("slaughterId",$("#slaughter").val());
		
		$.ajax({
		     url: URL+"MachineChart/find/by/houseId?id="+$("#slaughter").val(),
		     type: "get",
		     success: function (data) {
                  console.log(data)
				  	$("#title1").append("设备状态表")			    
				    $("#tablezz").empty();
					$("#tablezz").append(`
					<tr id="thname" style="font-size: 0.625rem;font-weight: bold;">
					    
					</tr>
					`)
				    $("#thname").append(`
				    <th>脚标机号</th>
				    <th>条码剩余</th>
				    <th>设备状态</th>
				    <th>创建者</th>
					<th>详情</th>
				    `)
					
					for(var i=0;i<data.object.length;i++){
					   for(var j=0;j<data.object[i].list.length;j++){
					  		$("#tablezz").append(`
					  		<tr>
					  		<th>`+data.object[i].list[j].id.substr(0,6)+(data.object[i].list[j].id.substr(6,7)==0?' ':'...')+`</th>
					  		<th>`+data.object[i].list[j].barcodeSurplus+`</th>
					  		<th>`+data.object[i].status+`</th>
							<th>`+data.object[i].list[j].createBy+`</th>
					  		<th><a href="mainform.html?id=17&sbztId=`+data.object[i].list[j].id+`">详情</a></th>
					  		</tr>
					  		`)				  
					  }
					 } 
				  var arrayObj = new Array();
				  var data1={
					  value:data.object[0].size,
					  name:"离线:"+data.object[0].size,
				  }
				  var data2={
				  	  value:data.object[1].size,
				      name:"正常:"+data.object[1].size,
				  }
				  var data3={
				  	  value:data.object[2].size,
				  	  name:"卡纸:"+data.object[2].size,
				  }
				  var data4={
				  	  value:data.object[3].size,
				  	  name:"缺纸:"+data.object[3].size,
				  }
				  arrayObj.push(data1)
				  arrayObj.push(data2)
				  arrayObj.push(data3)
				  arrayObj.push(data4)
				  //console.log(arrayObj)
				  
				  char2(arrayObj)
		     }
		});	 
		$.ajax({
		     url: URL+"PoultrySales/findSaleOfParent/to/linechart?houseId="+$("#slaughter").val(),
		     type: "get",
		     success: function (data) {
				console.log(data)
				char3(data.object.parents,data.object.months,data.object.sales_datas)
		     }
		});	 
		$.ajax({
		     url: URL+"PoultrySales/findAll/chart/by/house?house_id="+$("#slaughter").val(),
		     type: "get",
		     success: function (data) {
				console.log(data)
				$("#title2").append("禽类销售状态表")
				$("#tablezz1").empty();
				$("#tablezz1").append(`
				<tr id="thname1" style="font-size: 0.625rem;font-weight: bold;">
				    
				</tr>
				`)
				$("#thname1").append(`
				<th>禽类</th>
				<th>所属市场</th>
				<th>销量</th>
				<th>销售去向</th>
				<th>详情</th>
				`)
	
				for(var i=0;i<data.object.length;i++){
				  	$("#tablezz1").append(`
				  	<tr>
				  	<th>`+data.object[i].poultryName+`</th>
				  	<th>`+data.object[i].houseName+`</th>
				  	<th>`+data.object[i].salesSum+`</th>
				  	<th>`+data.object[i].salesAddr+`</th>
				    <th><a href="mainform.html?id=18&qlxsId=`+data.object[i].poultryId+`">详情</a></th>
				  	</tr>`)	
				 } 
		     }
		});	 
	}
	

	var char2=function(arrayObj){
		var myChart2 = echarts.init(document.getElementById('mainPage2'));
		myChart2.clear()
		option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b} : {c} ({d}%)'
		    },
		    series: [
		        {
		            name: '详情',
		            type: 'pie',
		            radius: '65%',
		            center: ['50%', '60%'],
		            data:arrayObj,
		            emphasis: {
		                itemStyle: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		myChart2.setOption(option);
	}
	
	
	
var char3=function(data1,data2,data3){
	var myChart3 = echarts.init(document.getElementById('mainPage3'));
	myChart3.clear()
	option = {

	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        data: data1
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data:data2
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            name: data1[0],
	            type: 'line',
	            stack: '总量',
	            data: data3[0]
	        },
	        {
	            name: data1[1],
	            type: 'line',
	            stack: '总量',
	            data: data3[1]
	        },
	        {
	            name: data1[2],
	            type: 'line',
	            stack: '总量',
	            data: data3[2]
	        },
	        {
	            name: data1[3],
	            type: 'line',
	            stack: '总量',
	            data: data3[3]
	        },
	        {
	            name: data1[4],
	            type: 'line',
	            stack: '总量',
	            data: data3[4]
	        }
	    ]
	};

	myChart3.setOption(option);
}
</script>
</body>
</html>